import { StatsContainer } from './index';
// import ThemeContext from './ThemeContext';
// import { useContext } from 'react';
import { connect } from 'react-redux'
/**
 * connect 是 react-redux 库中的一个高阶组件，用于将 redux 的 store 与 react 组件连接起来
 * connect(mapStateToProps, mapDispatchToProps)
 * mapStateToProps 是一个函数，用于将 redux 的 store 中的 state 映射到 react 组件的 props 中
 * mapDispatchToProps 是一个函数，用于将 redux 的 store 中的 dispatch 映射到 react 组件的 props 中
 */

const ChildOne = (props) => {
	let { supNum, oppNum, supPercent, supTian, oppTian, supTianPercent } = props
	// const { store } = useContext(ThemeContext)
	// const { othersStore } = useContext(ThemeContext)
	// const { supNum, oppNum, supPercent } = store.getState()
	// const { supTian, oppTian, supTianPercent } = othersStore.getState()
	return (
		<StatsContainer>
			<div>支持人数：{supNum}</div>
			<div>反对人数：{oppNum}</div>
			<div>支持比例：{isNaN(supPercent) ? 0 : supPercent}%</div>
			<div>喜欢甜甜人数：{supTian}</div>
			<div>不喜欢甜甜人数：{oppTian}</div>
			<div>喜欢比例：{isNaN(supTianPercent) ? 0 : supTianPercent}%</div>
		</StatsContainer>
	);
}

export default connect(state => ({ ...state }))(ChildOne)